<template>
	<view>
		<goodsList :goods="data.goodsList" @goodsItemClick="methods.goGoodsDetail"/>
		<van-divider v-if="data.flag" dashed>我是有底线的</van-divider>
	</view>
</template>

<script setup>
import { reactive } from "vue";
import { onShow, onHide, onLoad, onReachBottom, onPullDownRefresh,} from "@dcloudio/uni-app"
import goodsList from '../../conponents/goodsListItem/goodsListItem.vue'
import {apiRequest} from '../../utils/apiRequest.js'
const data = reactive({
	pageindex:1,
	goodsList:[],
	flag:false,
})

const methods = {
	getGoodsList(callBack){
		apiRequest({
			url:`/api/getgoods?pageindex=${data.pageindex}`
		}).then(res => {
			data.goodsList = [...data.goodsList,...res.data.message]
			console.log(data.pageindex)
			callBack && callBack() // 如果callBack存在则调用
		})
	},
	
	// 跳转到商品详情页
	goGoodsDetail(id){
		console.log(id,'sas')
		uni.navigateTo({
			url:'/pages/goods-detail/goods-detail?id=' + id
		})
	}
}

// 页面加载
onLoad(() => {
	methods.getGoodsList()
})

// 触底监听
onReachBottom(() => {
	// 取余判断数据是否已经完结
	if(data.goodsList.length % 10 !== 0 && data.goodsList.length % 10 < 10) return data.flag = true
	// 上滑刷新商品列表
	data.pageindex++
	methods.getGoodsList()
})

// 监听下拉刷新事件
onPullDownRefresh(() => {
	console.log("下拉刷新")
	data.pageindex = 1
	data.goodsList = []
	data.flag = false
	methods.getGoodsList(() => {
		uni.stopPullDownRefresh() // 成功后结束下拉刷新
	})
})
	
</script>

<style>

</style>
